import React, { Component } from 'react';
import { View, Text, Image } from 'react-native';
import request from '../../../../utils/request';
import { FRIENDS_VISITORS, BASE_URI } from '../../../../utils/pathMap';
import { pxToDp } from '../../../../utils/stylesKits';

class Index extends Component {

    state = {
        visitors: [
            // { "Distance": 9666804.2, "age": 21, "agediff": -2, "fateValue": 62, "gender": "女", "header": "/upload/13828459782.png", "marry": "未婚", "nick_name": "雾霭朦胧", "target_uid": 7, "uid": 8, "xueli": "大专" }
        ]
    }

    async componentDidMount() {
        // 必须要带上 token
        const res = await request.privateGet(FRIENDS_VISITORS);
        this.setState({ visitors: res.data })

    }

    render() {
        const { visitors } = this.state;
        return (
            <View style={{ flexDirection: 'row', marginTop: pxToDp(10), marginBottom: pxToDp(10), alignItems: 'center', paddingLeft: pxToDp(5), paddingRight: pxToDp(5) }}>
                <Text style={{ flex: 1, color: '#777', fontSize: pxToDp(14) }}>最近有{visitors.length}人来访，快去查看...</Text>
                <View style={{ flexDirection: 'row', flex: 1, alignItems: 'center', justifyContent: 'space-around' }}>
                    {
                        visitors.map((v, i) => <Image key={v.uid} style={{ width: pxToDp(50), height: pxToDp(50), borderRadius: pxToDp(25) }} source={{ uri: BASE_URI + v.header }} />)
                    }
                    <Text style={{ marginLeft: pxToDp(10), color: '#777', fontSize: pxToDp(20) }}>&gt;</Text>
                </View>
            </View>
        );
    }
}

export default Index;